﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!--<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="http://mwbrooks.github.io/thumbs.js/download/thumbs.0.5.2.js"></script>
    <script src="http://pep.briangonzalez.org/pep/js/pep/src/jquery.pep.js"></script>-->
    <style type="text/css">
        .ui-draggable {
            -ms-touch-action: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <span style="color: red" id="s1"></span>
        <div id="d1" style="border: 1px solid red; width: 200px; height: 200px; top: 50px; left: 50px; position: absolute;overflow:hidden;-ms-touch-action:none;">
            <a href="http://jbk404.site50.net/360DegreeView/mobile/common.html">click</a>
        </div>
        <img src="" />
    </form>
</body>
</html>
<script type="text/javascript">
    $(function () {
        var isTouchSupported = 'ontouchstart' in window;
        var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
        var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
        var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

        //alert(startEvent + "--" + moveEvent + "--" + endEvent);

        var d = document.getElementById("d1");
        var s = document.getElementById("s1");

        //$(d).draggable();
        var _left, _top, _bx, _by;
        var m = false;

        alert(window.navigator.msPointerEnabled);
        d.addEventListener("MSPointerDown", function (e) {
            m = true;
            _bx = e.pageX;
            _by = e.pageY;
            _left = parseInt($(d).css('left'));
            _top = parseInt($(d).css('top'));
            s.innerHTML = "MSPointerDown:x:" + _bx + ",y:" + _by + "<br/>";
        }, false);
        d.addEventListener("MSPointerMove", function (e) {
            if (m) {
                var _l = _left + e.pageX - _bx;
                var _t = _top + e.pageY - _by;
                s.innerHTML = "MSPointerMove:x--" + e.pageX + ",y--" + e.pageY + "<br/>";;
                $(d).css("left", _l);
                $(d).css("top", _t);
            }
        }, false);
        d.addEventListener("MSPointerUp", function (e) {
            m = false;
            s.innerHTML = "MSPointerUp:x:" + e.pageX + ",y:" + e.pageY + "<br/>";
        }, false);

        /*var _left, _top, _bx, _by;
        var m = false;
        d.ontouchstart = function (e) {

            m = true;
            _bx = e.pageX;
            _by = e.pageY;
            _left = parseInt($(d).css('left'));
            _top = parseInt($(d).css('top'));
            //s.innerHTML = "起始位置:x:" + _bx + ",y:" + _by + "<br/>";
            //setInterval(function () { onMove(e); }, 10);
        };

        d.ontouchmove = function (e) {
            if (m) {
                var _l = _left + e.pageX - _bx;
                var _t = _top + e.pageY - _by;
                //s.innerHTML = "移动位置:x--" + e.pageX + ",y--" + e.pageY + "<br/>";;
                $(d).css("left", _l);
                $(d).css("top", _t);
                //setInterval(function () { onMove(e); }, 10);
            }
        };

        d.ontouchend = function (e) {
            m = false;
            //s.innerHTML = "结束位置:x:" + e.pageX + ",y:" + e.pageY + "<br/>";
        };

        function onMove(e)
        {
            s.innerHTML = e.type+"位置:x:" + e.pageX + ",y:" + e.pageY + "<br/>";
        }

        //$(d).pep();*/
    })
</script>
